<template>
  <div class="wrap">
    <a-button style="margin-bottom: 20px" type="primary" @click="back"
      >返回</a-button
    >
    <a-table
      :dataSource="dataList"
      :columns="columns"
      rowKey="id"
      :pagination="false"
    >
      <template #imgList="{ record }">
        <a v-for="item in record.imgList" :href="item.url" target="_blank"
          ><img
            style="width: 50px; height: 50px; margin: 5px"
            :src="item.url"
            alt=""
        /></a>
      </template>
    </a-table>
  </div>
</template>

<script>
import {
  h,
  ref,
  toRefs,
  reactive,
  onMounted,
  computed,
  watch,
  createVNode,
} from "vue";
import utils from "@/utils/utils";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Service from "@/api/service";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

export default {
  setup(props, context) {
    const router = useRouter();
    let id = router.currentRoute.value.query;
    console.log(id);
    const state = reactive({
      dataList: [],
      columns: [
        {
          title: "id",
          dataIndex: "id",
        },
        {
          title: "姓名",
          dataIndex: "username",
        },
        {
          title: "标题",
          dataIndex: "title",
        },
        {
          title: "内容",
          dataIndex: "content",
          ellipsis: true,
        },
        {
          title: "图片",
          dataIndex: "imgList",
          slots: {
            title: "imgList",
            customRender: "imgList",
          },
        },
        {
          title: "发布时间",
          dataIndex: "createTime",
        },
        // {
        //   title: "操作",
        //   dataIndex: "operation",
        //   key: "operation",
        //   slots: {
        //     title: "operation",
        //     customRender: "operation",
        //   },
        // },
      ],
      current: 1,
      pageParams: {
        pageno: 1,
        rowsize: 10,
      },
      total: 1,
    });

    const getDataList = async () => {
      const { body } = await Service.getOtherUserDiscussPost(id);
      console.log(body);
      body.forEach((item) => {
        item.createTime = utils.formatDate(item.createTime);
        let imgList = [];
        for (let i = 1; i < item.photoFilesNums + 1; i++) {
          let obj = {};
          obj.url = `http://47.107.66.57:8080/images/DiscussPost/${item.id}/${i}.jpg`;
          imgList.push(obj);
        }
        item.imgList = imgList;
      });
      state.dataList = body;
    };
    onMounted(async () => {
      getDataList();
    });
    const back = async (pageNumber) => {
      router.go(-1);
    };
    const del = async (id) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确定删除吗?",
        okText: () => "确定",
        okType: "danger",
        cancelText: () => "取消",

        async onOk() {
          const res = await Service.delDiscussPost({ id: id });
          if (res.status == "1") {
            message.success("删除成功");
            getDataList();
          }
        },

        onCancel() {},
      });
    };
    return {
      ...toRefs(state),
      del,
      back,
    };
  },
};
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
}
.page {
  // position: absolute;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
</style>
